// 使用 jQuery 重写的 setupPoseEstimation 函数
export async function setupPoseEstimation() {
    const $video = $('#camera');  // 使用 jQuery 获取视频元素
    const net = await posenet.load();  // 加载 PoseNet 模型

    // 等待视频加载完毕
    $video.on('loadedmetadata', () => {
        // 确保视频宽高有效
        $video[0].width = $video[0].videoWidth;
        $video[0].height = $video[0].videoHeight;

        if ($video[0].videoWidth === 0 || $video[0].videoHeight === 0) {
            console.error("视频尺寸无效");
            return;
        }

        async function estimatePose() {
            // 确保视频尺寸有效
            if ($video[0].videoWidth === 0 || $video[0].videoHeight === 0) {
                console.error("视频尺寸无效");
                return;
            }

            // 获取视频帧的人体姿势
            const pose = await net.estimateSinglePose($video[0], {
                flipHorizontal: false
            });

            drawPose(pose);  // 绘制关键点
            estimateDistance(pose);  // 估算距离

            // 继续获取下一帧
            requestAnimationFrame(estimatePose);
        }

        estimatePose(); // 启动姿态估计
    });

    // 启动视频流
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then((stream) => {
                $video[0].srcObject = stream; // 将视频流绑定到 video 元素
            })
            .catch((error) => {
                console.error("获取视频流失败:", error);
            });
    } else {
        console.error("浏览器不支持获取视频流");
    }
}

// 根据视频尺寸设置canvas尺寸
const $video = $('#camera');  // 使用 jQuery 获取视频元素
const $canvas = $('#canvas');  // 使用 jQuery 获取画布元素

// 监听视频元数据加载完成事件
$video.on('loadedmetadata', function () {
    // 获取视频的宽度和高度
    const videoWidth = $video[0].videoWidth;
    const videoHeight = $video[0].videoHeight;

    // 设置 canvas 尺寸为视频尺寸
    $canvas[0].width = videoWidth;
    $canvas[0].height = videoHeight;

    console.log(`Video dimensions: ${videoWidth}x${videoHeight}`);
});


function drawPose(pose) {
    const ctx = $('#canvas')[0].getContext('2d');  // 使用 jQuery 获取 canvas 元素并获取 2d 上下文

    // 清除之前的画面
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // 定义骨架连接的关键点对
    const skeleton = [
        ['leftShoulder', 'leftElbow'],
        ['leftElbow', 'leftWrist'],
        ['rightShoulder', 'rightElbow'],
        ['rightElbow', 'rightWrist'],
        ['leftShoulder', 'rightShoulder'],
        ['leftHip', 'rightHip'],
        ['leftHip', 'leftKnee'],
        ['leftKnee', 'leftAnkle'],
        ['rightHip', 'rightKnee'],
        ['rightKnee', 'rightAnkle'],
        ['leftShoulder', 'leftHip'],
        ['rightShoulder', 'rightHip']
    ];

    // 绘制骨架：连线关键点
    skeleton.forEach(pair => {
        const point1 = pose.keypoints.find(p => p.part === pair[0]);
        const point2 = pose.keypoints.find(p => p.part === pair[1]);

        // 如果两个点都存在且置信度大于 0.5
        if (point1 && point2 && point1.score > 0.5 && point2.score > 0.5) {
            ctx.beginPath();
            ctx.moveTo(point1.position.x, point1.position.y);  // 起点
            ctx.lineTo(point2.position.x, point2.position.y);  // 终点
            ctx.strokeStyle = 'red';  // 线条颜色
            ctx.lineWidth = 2;  // 线条宽度
            ctx.stroke();
        }
    });

    // 绘制关键点
    pose.keypoints.forEach(point => {
        if (point.score > 0.5) {
            ctx.beginPath();
            ctx.arc(point.position.x, point.position.y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = 'red';
            ctx.fill();
        }
    });
}

// 估计与摄像头之间的距离
function estimateDistance(pose) {
    const shoulder = pose.keypoints.find(point => point.part === 'leftShoulder' || point.part === 'rightShoulder');

    if (shoulder && shoulder.score > 0.5) {
        const shoulderPosition = shoulder.position;
        const realWorldWidth = 0.4;  // 肩膀宽度，单位：米
        const focalLength = 500;  // 假设的焦距
        const screenWidth = 640;  // 屏幕宽度

        const estimatedDistance = (realWorldWidth * focalLength) / (shoulderPosition.x / screenWidth);
        console.log(`Estimated Distance: ${estimatedDistance.toFixed(2)}`);
    }
}
